<template>
	<div :class="['qn-page-' + theme]">
		<view class="collection-banner" @click="goPage('/pagesT/user/Collection')">
			<u-icon name="tags" size="40" color="#fff"></u-icon>
			<text>常购清单</text>
			<u-icon name="arrow-right" size="28" color="#fff"></u-icon>
		</view>
		<scroll-view scroll-y class="cate-ul clearfix" :style="{ height: 'calc(100vh - 212rpx - ' + (isBang ? '84px' : '50px') + ')' }">
			<view class="cate-li" v-for="(item, index) in cate_list" :key="index" @click="goPage('/pagesT/productDetail/productDetail?id=' + item.id + '&name=' + item.title)">
				<view class="cate-img-view"><image :src="item.images" mode="aspectFill" class="cate-img"></image></view>
				<view class="cate-tit">{{ item.title }}</view>
			</view>
		</scroll-view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			cate_list: []
		};
	},
	computed: {
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	created() {
		this.getAllCategory();
	},
	methods: {
		// 分类列表 getAllCategory
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					userCenterId: this.userId || 0
				})
				.then(data => {
					this.cate_list = data.data;
				});
		}
	}
};
</script>

<style lang="scss">
.collection-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	margin: 20rpx 30rpx;
	background: linear-gradient(90deg, #ff8a00, #e52e00);
	color: #fff;
	border-radius: 12rpx;
	font-size: 28rpx;

	text {
		flex: 1;
		margin-left: 16rpx;
	}
}
.cate-ul {
	/* #ifdef H5||MP */
	height: calc(100vh - 230upx);
	/*#endif*/
	/* #ifdef APP-PLUS */
	height: calc(100vh - 100upx);
	/*#endif*/
	.cate-li {
		float: left;
		width: 150upx;
		margin-left: 72upx;
		text-align: center;
		margin-top: 50upx;
		.cate-img-view {
			width: 150upx;
			height: 150upx;
			background-color: #f4f5f6;
			border-radius: 8rpx;
			overflow: hidden;
			.cate-img {
				width: 150upx;
				height: 150upx;
				display: block;
			}
		}

		.cate-tit {
			font-size: 28upx;
			color: #333;
			padding-top: 20upx;
		}
	}
}
</style>
